<template>
	<view>
		<scroll-view @scroll="scroll" @scrolltolower="scrolltolower" lower-threshold="10" :scroll-y="isSticky" :style="{ height: props.scrollViewHeight + 'px' }">
			<view class="">
				<view class="tab">
					<view class="tab_flex">
						<view
							class="items"
							:class="tabbar.activeID == item.id ? 'actitems' : ''"
							:style="{ width: itemWidth }"
							v-for="(item, index) in tabbar.tabbarList"
							:key="index"
							@click="tabbarChange(item)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>
				<view v-if="tabbar.activeID == 1">
					<active1 v-model:isSticky="isSticky" ref="active1Ref"></active1>
				</view>
				<view v-if="tabbar.activeID == 2">
					<active2 v-model:isSticky="isSticky" ref="active2Ref"></active2>
				</view>
				<view v-if="tabbar.activeID == 3">
					<active3 v-model:isSticky="isSticky" ref="active3Ref"></active3>
				</view>
				<view v-if="tabbar.activeID == 4">
					<active4 :isShow="tabbar.isShow" :isAllShow='tabbar.isAllShow' v-model:isSticky="isSticky" ref="active4Ref"></active4>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, computed, nextTick, watch, onMounted } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import active1 from './revenue.vue';
import active2 from './wallet.vue';
import active3 from './shop.vue';
import active4 from './about.vue';
const tabbar = reactive({
	tabbarList: [],
	activeID: 1,
	isShow: true,
	isAllShow:true
});
const itemWidth = computed(() => {
	return `${100 / tabbar.tabbarList.length}%`;
});
const tabbarChange = (item) => {
	tabbar.activeID = item.id;
};
const props = defineProps({
	initialIsSticky: {
		type: Boolean,
		default: false
	},
	scrollViewHeight: {},
	userData: {}
});
const isSticky = ref(false);
watch(
	() => props.initialIsSticky, // 监听的目标：外部传入的 initialIsSticky
	(newVal) => {
		isSticky.value = newVal; // 同步到内部变量
		uni.setStorageSync('initialIsSticky', newVal);
	},
	{ immediate: true } // 立即执行一次，初始化时同步初始值
);
onMounted(() => {
	tabbar.tabbarList = [
		{
			name: '收益明细',
			id: 1
		},
		{
			name: '钱包账户',
			id: 2
		},
		{
			name: '文创商城',
			id: 3
		},
		{
			name: '关于我们',
			id: 4
		}
	];
	if (props.userData.vip == 0) {
		tabbar.tabbarList = tabbar.tabbarList.slice(2);
		tabbar.activeID = 3;
		tabbar.isAllShow = false
		return
	}
	if (props.userData.vip == 2 && props.userData.vipType == 1 ) {
		tabbar.tabbarList = tabbar.tabbarList.slice(2);
		tabbar.activeID = 3;
		tabbar.isShow = true;
		return
	}
	if(props.userData.vip == 2 && props.userData.vipType != 1) {
		tabbar.activeID = 1;
		tabbar.isShow = false;
	} else {
		tabbar.tabbarList = tabbar.tabbarList.slice(2);
		tabbar.activeID = 3;
		tabbar.isShow = false;
	}
	
	tabbar.activeID = 1;
});
const active1Ref = ref(null);
const active2Ref = ref(null);
const active3Ref = ref(null);
const scrolltolower = () => {
	console.log('1111111111');
	const refMap = {
		1: active1Ref,
		2: active2Ref,
		3: active3Ref
	};
	const currentRef = refMap[tabbar.activeID];
	if (currentRef?.value?.loadMore) {
		currentRef.value.loadMore();
	}
};
</script>

<style lang="scss" scoped>
.kong {
	width: 360rpx;
	margin: 128rpx auto;
	image {
		width: 360rpx;
		height: 232rpx;
	}
	.text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #979797;
		margin-top: 50rpx;
		text-align: center;
	}
}
.tab {
	width: 750rpx;
	height: 72rpx;
	background: #f3f0e8;
	position: sticky;
	z-index: 4;
	top: 0%;
	.tab_flex {
		display: flex;
		height: 72rpx;
		align-items: center;
		.items {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #717171;
			text-align: center;
		}
		.actitems {
			font-weight: bold;
			font-size: 24rpx;
			color: #75613e;
		}
	}
}
</style>
